import { defineStore } from 'pinia'; // 引入 Pinia 的 defineStore，用于创建状态管理 Store

// 单独封装一个函数，用于设置页面根元素的 data-bs-theme 属性，控制 Bootstrap 的主题色
function applyThemeToDOM(isDark) {
    document.documentElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
}

// 创建一个名为 "theme" 的 Pinia 状态管理仓库（store）
export const useThemeStore = defineStore('theme', {
    // 定义状态（state）：用于保存暗黑模式是否开启
    state: () => ({
        // 从 localStorage 读取用户上次的主题偏好，如果是 'true' 则为开启暗黑模式
        dark: localStorage.getItem('darkMode') === 'true'
    }),

    // getters 是计算属性，这里返回一个 isDark，方便模板或组件中使用
    getters: {
        isDark: state => state.dark
    },

    // 定义可调用的 action（用于更新状态、执行副作用）
    actions: {
        // 用户点击主题切换按钮时触发
        toggle() {
            this.dark = !this.dark; // 翻转暗黑模式状态
            localStorage.setItem('darkMode', this.dark); // 把新状态保存到 localStorage
            applyThemeToDOM(this.dark); // 应用新的主题样式到 DOM
        },

        // 初始化主题设置，通常在 app 启动时调用
        async initTheme() {
            // 可扩展：比如从后端接口获取用户偏好（这里保留本地存储逻辑）
            const stored = localStorage.getItem('darkMode');
            this.dark = stored === 'true'; // 确保 state 正确同步
            applyThemeToDOM(this.dark); // 应用样式
        }
    }
});
